import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ConstrainDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('尺寸限制类和装饰容器'),
          centerTitle: true,
          actions: <Widget>[
            // UnconstrainedBox去除父组件的尺寸限制，但是仍然占有相应的空间
            UnconstrainedBox(
              child: Padding(
                padding: EdgeInsets.only(right: 20),
                child: SizedBox(
                  width: 20,
                  height: 20,
                  child: CircularProgressIndicator(
                    strokeWidth: 2,
                    valueColor: AlwaysStoppedAnimation(Colors.white70),
                  ),
                ),
              ),
            )
          ],
        ),
        body: Column(
          children: <Widget>[
            // ConstrainedBox用于对子组件添加额外的约束
            ConstrainedBox(
              constraints:
                  BoxConstraints(minWidth: double.infinity, minHeight: 50),
              child: Container(
                height: 5,
                // DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等.
                // decoration：代表将要绘制的装饰，它的类型为Decoration.
                // position：此属性决定在哪里绘制Decoration，它接收DecorationPosition的枚举类型，
                //           该枚举类有两个值：
                //               background：在子组件之后绘制，即背景装饰。
                //               foreground：在子组件之上绘制，即前景
                child: DecoratedBox(
                  // BoxDecoration类是Decoration的子类
                  decoration: BoxDecoration(color: Colors.red),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 20),
              alignment: Alignment.center,
              // SizedBox用于给子元素指定固定的宽高
              child: SizedBox(
                width: 80,
                height: 80,
                child: DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20),
              // 多重限制时，
              // 对于minWidth和minHeight来说，是取父子中相应数值较大的
              // 对于maxWidth和maxHeight来说，是取父子中相应数值较小的
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: 60, minHeight: 60),
                child: ConstrainedBox(
                  constraints: BoxConstraints(minWidth: 90, minHeight: 20),
                  child: DecoratedBox(
                    decoration: BoxDecoration(color: Colors.red),
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20),
              child: DecoratedBox(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.red, Colors.orange[300]],
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        tileMode: TileMode.clamp
                    ),
                    borderRadius: BorderRadius.circular(3.0),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black54,
                          offset: Offset(2, 2),
                          blurRadius: 4)
                    ],
                    shape: BoxShape.rectangle
                ),
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 80, vertical: 18),
                  child: Text(
                    'Login',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            )
          ],
        ),
      );
}
